import React, { useRef, useEffect } from 'react';

import { provinces } from './province';
import { message } from 'antd';
import 'antd/dist/antd.css';

export default () => {
  const refMap = useRef();
  const infoWindow = useRef();

  const showInfoM = (e: any, name: string, num: number) => {
    message.info(`${name}销售数据为：${num} 个`);
    // console.log(message);
  };

  const initMarker = () => {
    const markers = []; //province见Demo引用的JS文件
    for (let i = 0; i < provinces.length; i += 1) {
      let marker;
      marker = new AMap.Marker({
        position: provinces[i].center.split(','),
        title: provinces[i].name,
        map: refMap.current,
      });
      marker.on('click', (e: any) => {
        showInfoM(e, provinces[i].name, provinces[i].number);
      });
      markers.push(marker);
    }
    refMap.current.setFitView();
  };

  useEffect(() => {
    console.log(provinces, 'ppp');

    refMap.current = new AMap.Map('container', {
      zoom: 4.5,
      resizeEnable: false,
      center: [106.397428, 37.90923],
    });
    const toolBar = new AMap.ToolBar({
      visible: true,
    });
    refMap.current?.addControl(toolBar);
    initMarker();
  }, []);

  const open = () => {
    console.log(refMap.current);
    // 信息窗体的内容
    const content = [
      '<div> ',
      '</br>',
      '电话 : 010-84107000   邮编 : 100102',
      '地址 : 北京市望京阜通东大街方恒国际中心A座16层</div>',
    ];

    // 创建 infoWindow 实例
    infoWindow.current = new AMap.InfoWindow({
      content: content.join('<br>'), //传入 dom 对象，或者 html 字符串
    });

    // 打开信息窗体
    infoWindow.current.open(refMap.current, refMap.current?.getCenter());
  };
  return (
    <div>
      <div id="container" style={{ width: '100%', height: '1000px' }}></div>
    </div>
  );
};
